<template>
	<view class="page_edu">
		<view class="page_edu_header">
			<view class="header">
				<!-- <image src="/static/icon_main.png" class="btn"></image>
				<view class="input">
					<image src="/static/search.png" class="search"></image>
					<input type="text" value="" placeholder="搜索" />
				</view>
				<image src="/static/msg.png" class="btn"></image> -->
			</view>
			<view class="header_content">
				<view class="left">
					<text class="title">甜心帮你测情感</text>
					<text class="sub_title">探索内心情感，发现真实自我！</text>
					<text class="btn" @click="toType('趣味',0)">开始测试</text>
				</view>
				<view>
					<image src="/static/right.png" style="width: 131px;height: 122px;"></image>
				</view>
			</view>
		</view>
		<view class="page_content">
			<view class="menu">
				<template v-for="(it,i) in menus">
					<view class="item" :key="'menu_'+i" @click="toType('趣味',i)">
						<view class="img_view" :style="{background: it.bg}">
							<image :src="it.icon" class="image"></image>
						</view>
						<text class="txt">{{it.txt}}</text>
					</view>
				</template>
			</view>
			<!-- <view class="s_menu">
				<template v-for="(it,i) in second_menus">
					<view class="item" :key="'s_menu_'+i">
						<image :src="it.icon" class="image"></image>
						<text class="txt">{{it.txt}}</text>
					</view>
				</template>
			</view> -->
			<view class="ad" @click="signIn">
				<view class="ad_btn">
					<text class="title">点击签到</text>
					<text class="sub_title">每天签到获取金币免费测评</text>
				</view>
				<image src="/static/tag.png" class="bg"></image>
			</view>
		</view>


		<view class="today">
			<image src="../../static/image/laba_2.gif" class="image"></image>
			今日热测
		</view>

		<scroll-view scroll-y="true" class="slider">

			<view v-for="(it, i) in records" :key="'slider_item_'+i">
				<view class="item" :style="{background: it.bg, marginRight: i === records.length - 1 ? '15px' : '0px'}">
					<view class="item_content">
						<view class="title" @click="toDati(i)">
							<text class="first">{{it.title}}</text>
							<!-- <text class="main">{{it.mainTeacher}}</text> -->

							<view class="second">
								<view class="sub" :style="{color:it.subColor}">
									<image src="/static/image/hot.gif" class="imageHot"></image>

									{{it.subTitle}}

								</view>
								<view class="btn">立即测评</view>

							</view>
						</view>

						<image class="image" :src="it.icon"></image>
						<text class="free">{{it.quesSubject}}</text>

					</view>

				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import MusicPlayer from '@/common/audioPlayer.js'; // 导入音乐播放器
	export default {
		data() {
			return {
				mid: '', //分享id
				menus: [{
						bg: 'linear-gradient(0deg,rgba(205, 41, 216, 1.0),rgba(242, 141, 229, 1.0))',
						icon: '/static/nav_icon/01.png',
						txt: '情感',
						isFree: true
					},
					{
						bg: 'linear-gradient(0deg,rgba(251,184,35,1),rgba(255,228,40,1))',
						icon: '/static/nav_icon/02.png',
						txt: '个性',
						isFree: false
					},
					{
						bg: 'linear-gradient(0deg,rgba(255,126,34,1),rgba(240,184,27,1))',
						icon: '/static/nav_icon/03.png',
						txt: '财运',
						isFree: true
					},
					{
						bg: 'linear-gradient(0deg,rgba(9,177,252,1),rgba(24,200,255,1))',
						icon: '/static/nav_icon/04.png',
						txt: '趣味',
						isFree: true
					}
				],

				records: [{
						bg: 'linear-gradient(-30deg,rgba(171,218,255,1),rgba(215,239,255,1))',
						title: '你渴望爱情的来临吗？',
						mainTeacher: '回想一下，平时你都是如何看报纸的？',
						subTitle: '1230人已测评',
						subColor: '#9720ff',
						icon: '/static/image/0.png',
						quesSubject: '情感'
					},
					{
						bg: 'linear-gradient(-30deg,rgba(192,253,227,1),rgba(224,252,240,1))',
						title: '查看详情',
						mainTeacher: '小B',
						subTitle: '标题名称',
						subColor: '#9720ff',
						icon: '/static/image/1.png',
						quesSubject: '个性'
					},
					{
						bg: 'linear-gradient(-30deg,rgba(171,218,255,1),rgba(215,239,255,1))',
						title: '教师考情分析',
						mainTeacher: '小A',
						subTitle: '标题名称',
						subColor: '#9720ff',
						icon: '/static/image/2.png',
						quesSubject: '财运'
					},
					{
						bg: 'linear-gradient(-30deg,rgba(192,253,227,1),rgba(224,252,240,1))',
						title: '教师考情分析',
						mainTeacher: '小A',
						subTitle: '标题名称',
						subColor: '#9720ff',
						icon: '/static/image/3.png',
						quesSubject: '趣味'
					}
				]
			}
		},
		onShareAppMessage(option) {
			console.log(option, '分享')
			return {
				title: '甜心趣味测评·情感测评',
				desc: '免费测测你的性感指数.',
				path: '/pages/index/index?mid=' + this.mid, //+'&__id__=', // ?后面的参数会在转发页面打开时传入onLoad方法

				success() {
					console.log('转发发布器已调起，并不意味着用户转发成功，微头条不提供这个时机的回调');
				},
				fail() {
					console.log('转发发布器调起失败');
				}
			}
		},
		onLoad() {
			// 热门题目
			this.hotQues();


		},
		onReady() {
			// 创建音频上下文
			this.innerAudioContext = uni.createInnerAudioContext();
			this.innerAudioContext.src = ''; // 替换为你的音乐文件 URL  
			//this.getBanner();
			// 播放报错的事件监听
			this.innerAudioContext.onError((res) => {
				console.log(res);
			});
		},
		onShow() {
			//重新登录一次,可以获取最新的用户信息
			this.$app.miniAppLogin();
		},
		methods: {
			playMusic(src) {
				console.info(src);
				this.innerAudioContext.src = src;
				this.innerAudioContext.play();
			},


			toType(type, index) {
				//this.playMusic('https://dati.obs.cn-south-1.myhuaweicloud.com/dati_app/music/ready_go.mp3')


				let subject = this.menus[index].txt;
				if (subject == '趣味') {
					subject = '脑筋急转弯'
				}
				this.$log('传入的值是', type + ',' + subject);
				uni.navigateTo({
					url: '/pages/detail/detail?type=' + type + '&subject=' + subject
				})
			},

			// 热门题目
			hotQues() {


				let urlPost = this.$app.apiPath.dati.showQuestionHot;
				let key = "hotQuestionList";
				if (this.aCache.has(key)) {
					this.datalist = this.aCache.get(key)
					this.hotQuesList(this.datalist);
				} else {
					this.$app.post(urlPost, {}).then(res => {
						this.showPageLoading = false;

						if (res.code == 200) {
							this.datalist = res.data;
							//this.$log(this.datalist); 
							// 加入缓存,一个小时
							this.aCache.add(key, res.data);
							this.hotQuesList(this.datalist);
						} else {
							this.$refs.uNotify.primary('网络错误,请重新进入小程序')
						}

					})
				}
			},

			toDati(index) {
				console.info('id', index);
				let id = this.records[index].quesId
				//this.playMusic('https://dati.obs.cn-south-1.myhuaweicloud.com/dati_app/music/ready_go.mp3')
				this.$log('传过去的id', id);
				uni.navigateTo({
					url: '/pages/detail/detail?quesId=' + id
				});
			},
			// 封装indexList
			indexList_split(indexList) {
				this.indexList1 = indexList.slice(0, 4);
				this.indexList2 = indexList.slice(4, 8);
				this.indexList3 = indexList.slice(8);

			},
			// 签到
			signIn() {

				uni.showLoading({
					title: '请稍候'
				})
				setTimeout(() => {
					uni.hideLoading()
				}, 700);

				let urlPost = this.$app.apiPath.dati.signIn;
				this.$app.post(urlPost, {}).then(res => {

					if (res.code == 200) {
						this.$app.alert(res.msg);
					} else {
						this.$refs.uNotify.primary('网络错误,请重新进入小程序')
					}

				})
			},

			// 封装热门题目
			hotQuesList(list) {

				/*
				id: 6
				quesEnd: null
				quesId: 10
				quesName: "颜色透露出男人的性需要"
				quesStart: null
				remark: null
				sort: null
				status: 0
				*/

				/*
				{
					bg: 'linear-gradient(-30deg,rgba(192,253,227,1),rgba(224,252,240,1))',
					title: '教师考情分析',
					mainTeacher: '小A',
					subTitle: '标题名称',
					subColor: '#9720ff',
					icon: '/static/image/quwei.png',
					quesSubject: '趣味'
				}
				*/

				this.records.length = 0;
				this.$log('进入hotQuesList', '')
				list.forEach((item, index) => {
					//this.$log('===',item);
					let bg = 'linear-gradient(-30deg,rgba(192,253,227,1),rgba(224,252,240,1))';
					if (index % 2 == 1) {
						bg = 'linear-gradient(-30deg,rgba(171,218,255,1),rgba(215,239,255,1))'
					}
					let d = {
						quesId: item.quesId,
						bg: bg,
						title: item.quesName,
						mainTeacher: '',
						subTitle: this.getRandomNumber() + '人已测',
						subColor: '#9720ff',
						icon: '/static/image/' + index + '.png',
						quesSubject: item.remark
					}
					this.records.push(d);
				})
			},
			// 生成从1000到2000之间的随机数
			getRandomNumber() {
				return Math.floor(Math.random() * 1001) + 1000;
			}
		}
	}
</script>

<style>
	page {
		width: 100%;
		background-color: #ebebeb;
	}
</style>
<style lang="scss" scoped>
	@function realSize($args) {
		@return $args / 1.5;
	}

	.page_edu {
		width: 100%;
		background-color: $uni-bg-color;
	}

	.page_edu_header {
		// padding-top: var(--status-bar-height);
		background-color: $uni-color-primary;
		width: 100%;
		height: realSize(385px);

		.header {
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: realSize(20px);

			.btn {
				width: realSize(36px);
				height: realSize(30px);
			}

			.input {
				height: realSize(59px);
				width: 100%;
				margin-left: realSize(20px);
				margin-right: realSize(20px);
				background: rgba(255, 255, 255, 1);
				border-radius: realSize(30px);
				display: flex;
				flex-direction: row;
				align-items: center;

				.search {
					width: realSize(30px);
					height: realSize(30px);
					margin-left: realSize(20px);
					margin-right: realSize(20px);
				}
			}
		}

		.header_content {
			display: flex;
			flex-direction: row;

			.left {
				display: flex;
				flex-direction: column;
				width: 57%;
				margin-top: 10px;
				margin-left: 15px;
				margin-right: 15px;

				.title {
					width: realSize(419px);
					height: realSize(59px);
					font-size: realSize(47px);
					font-weight: bold;
					color: #FFFFFF;
				}

				.sub_title {
					margin-top: 5px;
					margin-bottom: 5px;
					font-size: realSize(18px);
					font-weight: 400;
					color: rgba(255, 255, 255, 1);

					background: linear-gradient(0deg, rgba(255, 117, 244, 1.0) 0%, rgba(255, 255, 255, 1) 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}

				.btn {
					margin-top: 16px;
					font-weight: bold;
					width: realSize(198px);
					height: realSize(60px);
					background: linear-gradient(-30deg, rgba(252, 135, 29, 1), rgba(246, 185, 9, 1));
					box-shadow: 0px 4px 10px 0px rgba(255, 121, 0, 0.5);
					border-radius: realSize(30px);
					color: rgba(255, 255, 255, 1);
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}

	.page_content {
		width: 100%;
		margin-top: -69px;

		.menu {
			margin-left: 10px;
			margin-right: 10px;
			padding-left: 10px;
			padding-right: 10px;
			height: realSize(176px);
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 10px 10px 0px rgba(0, 161, 124, 0.1);
			border-radius: 10px;
			display: flex;
			flex-direction: row;
			align-items: stretch;
			justify-content: space-between;

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.img_view {
					width: 60px;
					height: 60px;
					border-radius: 30px;
					display: flex;
					align-items: center;
					justify-content: center;

					.image {
						width: 55%;
						height: 55%;
					}
				}

				.txt {
					margin-top: 5px;
					font-size: 14px;
					color: rgba(51, 51, 51, 1);
				}
			}
		}

		.s_menu {
			display: flex;
			flex-direction: row;
			align-items: stretch;
			justify-content: space-between;
			margin-top: 15px;
			margin-left: 10px;
			margin-right: 10px;
			padding-left: 10px;
			padding-right: 10px;

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.image {
					width: 35px;
					height: 35px;
				}

				.txt {
					margin-top: 5px;
					font-size: 14px;
					color: rgba(51, 51, 51, 1);
				}
			}
		}

		.ad {
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;

			.bg {
				position: absolute;
				width: 120px;
				height: 105px;
				left: 0;
			}

			.ad_btn {
				width: 100%;
				height: 63px;
				margin: 30px;
				background: linear-gradient(0deg, rgba(253, 155, 28, 1), rgba(251, 197, 33, 1));
				border-radius: 67px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.title {
					font-size: realSize(28px);
					font-family: PingFang-SC-Heavy;
					font-weight: 800;
					color: rgba(255, 255, 255, 1);
				}

				.sub_title {
					background: linear-gradient(0deg, rgba(255, 128, 37, 1), rgba(255, 153, 32, 1));
					box-shadow: 0px 4px 5px 0px rgba(92, 53, 48, 0.3), 0px 1px 0px 0px rgba(228, 228, 228, 1);
					border-radius: realSize(24px);
					font-size: realSize(20px);
					font-family: PingFang-SC-Heavy;
					font-weight: 800;
					font-style: italic;
					color: rgba(255, 236, 177, 1);
					line-height: realSize(26px);
				}
			}
		}
	}

	.slider {

		width: 100%;
		background-color: $uni-bg-color;

		.item {
			display: block;
			margin-left: 15px;
			margin-top: 13px;
			margin-bottom: 13px;
			width: 92%;

			border-radius: 10px;

			.item_content {
				padding-top: 5px;
				padding-bottom: 5px;
				display: flex;
				flex-direction: row;

				.title {
					width: 66%;
					margin: 10px;
					display: flex;
					flex-direction: column;


					.first {
						min-height: 60px;
						display: -webkit-box;
						/* 使用弹性盒子布局 */
						-webkit-box-orient: vertical;
						/* 垂直排列 */
						-webkit-line-clamp: 2;
						/* 限制显示的行数为2 */
						overflow: hidden;
						/* 隐藏超出部分 */
						text-overflow: ellipsis;
						/* 使用省略号表示超出部分 */
						font-weight: bold;
						font-size: 20px;
						color: rgba(46, 65, 69, 1);
					}

					.second {
						display: flex;
						flex-direction: row;
					}

					.main {
						font-size: 13px;
						color: rgba(79, 103, 101, 1);
						margin-top: 5px;
					}

					.sub {

						width: 120px;
						font-size: 12px;
						margin-top: 20px;
						background: rgba(255, 255, 255, 0.4);
						border-radius: 5px;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}

				.image {
					margin-top: 35px;
					border-radius: 10px;
					width: 80px;
					height: 80px;
				}

				.free {
					margin-top: -5px;
					background: rgba(11, 147, 252, 1);
					border-radius: 0px 0px 22px 22px;
					width: 25px;
					height: 50px;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #FFFFFF;
					font-size: 14px;
					writing-mode: vertical-rl;
					/* 竖排，从右到左 */
					text-orientation: upright;
					/* 文字方向保持直立 */
				}

				.imageHot {
					width: 20px;
					height: 18px;

				}

				.btn {
					margin-top: 5px;
					font-size: 15px;
					width: 128px;
					height: 34px;
					background: linear-gradient(30deg, #aa00ffcc, #7d00bc88);
					box-shadow: 0px 4px 10px 0px #aa00ff88;
					border-radius: realSize(30px);
					color: rgba(255, 255, 255, 1);
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}

	.today {
		font-size: 20px;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: auto;
		width: 140px;
		color: #7d00bc;

		image {
			width: 30px;
			height: 30px;
		}
	}
</style>